<script setup lang="ts">
import {videoImagesDir} from '@/utils/config.ts'
import TextInfo from '@/components/text-info.vue'
import {useVideo} from '@/pages/hot/composables/useVideo.ts'
import {usePagination} from '@/pages/hot/composables/usePagination.ts'

const {videos, openHotVideo} = useVideo()
const {page, pageSize, pageList} = usePagination(videos.value)
</script>

<template>
  <div class="dreamVideosFewImg">
    <div class="video" v-for="video in pageList" :key="video.video"
         @contextmenu.prevent="openHotVideo(video)"
    >
      <a-image :width="390"
               :height="228"
               :src="videoImagesDir + video.images[0]"
      />
      <text-info :movieProps="video.movie"
                 :video="video"
      />
    </div>
  </div>

  <el-pagination
      v-model:current-page="page"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total"
      :total="videos.length"
      style="margin-left: 550px"
  />
</template>

<style lang="stylus" scoped>
.dreamVideosFewImg
  display: flex
  flex-wrap: wrap
  justify-content: space-evenly
  margin: 0 6px
  .video
    margin-bottom: 15px
    background white
    border-radius 5px
    border 2px solid #f4f4f4
    &:hover
      border 2px solid #00BE9A;
</style>
